<template>
  <el-form label-width="auto" label-position="top">
    <el-form-item label="宽度">
      <el-input-number v-model="componentStyle.width" :min="1" :max="500" />
    </el-form-item>
    <el-form-item label="是否必填">
      <el-radio-group v-model="elFormItemProps.required">
        <el-radio-button label="true" :value="true" />
        <el-radio-button label="false" :value="false" />
      </el-radio-group>
    </el-form-item>
    <el-form-item label="类型">
      <el-select
        v-model="componentProps.type"
        placeholder="Select"
        style="width: 240px"
        @change="componentProps.modelValue = null"
      >
        <el-option
          v-for="item in typeList"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </el-form-item>
    <el-form-item label="标签">
      <el-input v-model="currentItem.label" />
    </el-form-item>
    <el-form-item label="显示在输入框中的格式">
      <el-input v-model="componentProps.format" />
    </el-form-item>
    <template v-if="rangeSelection">
      <el-form-item label="开始占位内容">
        <el-input v-model="componentProps.startPlaceholder" />
      </el-form-item>
      <el-form-item label="结束占位内容">
        <el-input v-model="componentProps.endPlaceholder" />
      </el-form-item>
      <el-form-item label="分隔符">
        <el-input v-model="componentProps.rangeSeparator" />
      </el-form-item>
      <el-form-item label="取消两个日期面板之间的联动">
        <el-radio-group v-model="componentProps.unlinkPanels">
          <el-radio-button label="true" :value="true" />
          <el-radio-button label="false" :value="false" />
        </el-radio-group>
      </el-form-item>
    </template>
    <template v-else>
      <el-form-item label="输入框占位文本">
        <el-input v-model="componentProps.placeholder" />
      </el-form-item>
    </template>
  </el-form>
</template>

<script setup lang="ts">
import { computed, PropType } from "vue";
import { DraggableTreeNode } from "../../../type";
import { DateComponentData, DateComponentProps } from "./display-date";
const typeList = [
  { label: "日期单选", value: "date" },
  { label: "日期多选", value: "dates" },
  { label: "周", value: "week" },
  { label: "月单选", value: "month" },
  { label: "月多选", value: "months" },
  { label: "年单选", value: "year" },
  { label: "年多选", value: "years" },
  { label: "日期时间", value: "datetime" },
  { label: "范围日期", value: "daterange" },
  { label: "范围日期时间", value: "datetimerange" },
  { label: "范围年", value: "yearrange" },
  { label: "范围月", value: "monthrange" },
];
const rangeSelection = computed(() => {
  switch (componentProps.value.type) {
    case "daterange":
    case "datetimerange":
    case "yearrange":
    case "monthrange":
      return true;
    default:
      return false;
  }
});
const props = defineProps({
  currentItem: {
    type: Object as PropType<DraggableTreeNode<
      DateComponentProps,
      DateComponentData
    > | null>,
    default: null,
  },
});
const emit = defineEmits(["update:currentItem"]);
const elFormItemProps = computed({
  get() {
    return props.currentItem?.component?.elFormItemProps || {};
  },
  set(value) {
    if (props.currentItem?.component) {
      props.currentItem.component.elFormItemProps = value;
    }
  },
});
const currentItem = computed({
  get() {
    return (
      props.currentItem || {
        label: "",
        component: {},
      }
    );
  },
  set(value) {
    emit("update:currentItem", value);
  },
});
const componentProps = computed({
  get() {
    return props.currentItem?.component?.componentProps || {};
  },
  set(value) {
    if (props.currentItem?.component) {
      props.currentItem.component.componentProps = value;
    }
  },
});
const componentStyle = computed({
  get() {
    return props.currentItem?.component?.componentStyle || {};
  },
  set(value) {
    if (props.currentItem?.component) {
      props.currentItem.component.componentStyle = value;
    }
  },
});
</script>

<style lang="scss" scoped></style>
